<template>

	<view class="content">

		<view class="content-top">
			<view class="content-title">
				<text>异常处理</text>
			</view>
			<hr>
			<u-form :model="formData" ref="formData" style="margin-top: 24rpx;" :rules="rules">
				<u-row gutter="100">

					<u-col span="5">
						<u-form-item :border-bottom="false" label="异常模型编码:" label-width='200rpx' prop="itemCode">
							<u-input v-model="formData.itemCode" disabled placeholder="" />
							<u-icon label="" size="40" name="search" @click="selectException"></u-icon>
						</u-form-item>
					</u-col>
					<u-col span="5">
						<u-form-item :border-bottom="false" label="异常项目名称:" label-width='200rpx' prop="itemName">
							<u-input v-model="formData.itemName" disabled placeholder="" />
						</u-form-item>
					</u-col>
					<u-col span="5">
						<u-form-item :border-bottom="false" label="异常类型:" prop="exceptionTypeId" label-width='150rpx'>
							<u-radio-group v-model="formData.exceptionTypeId" size="50" disabled>
								<u-radio icon-size="50" label-size="30" v-for="(item, index) in exceptionType"
									:key="index" :name="item.dictValue" disabled>
									{{item.dictLabel}}
								</u-radio>
							</u-radio-group>
						</u-form-item>
					</u-col>
					<u-col span="5">
						<u-form-item :border-bottom="false" label="异常等级:" prop="exceptionLevelId" label-width='150rpx'>
							<u-radio-group v-model="formData.exceptionLevelId" size="50">
								<u-radio icon-size="50" label-size="30" v-for="(item, index) in exceptionLevel"
									:key="index" :name="item.dictValue" disabled>
									{{item.dictLabel}}
								</u-radio>
							</u-radio-group>
						</u-form-item>
					</u-col>

					<u-col span="5">
						<u-form-item :border-bottom="false" label="处理人:" label-width='200rpx' prop="handlerIdName">
							<u-input v-model="formData.handlerIdName" disabled placeholder="" />
						</u-form-item>
					</u-col>
					<u-col span="5">
						<u-form-item :border-bottom="false" label="处理组:" label-width='200rpx' prop="groupIdName">
							<u-input v-model="formData.groupIdName" disabled placeholder="" />
						</u-form-item>
					</u-col>



				</u-row>
			</u-form>

		</view>
		<view class="content-bottom">

			<view class="tab-list1">
				<u-form :model="form1" ref="uForm">
					<u-form-item :border-bottom="false">
						<view style="display: flex; margin: 0 auto;">
							<u-button @click="submit" type="primary" size="medium"><u-icon
									name="arrow-upward"></u-icon>提交
							</u-button>
							<view style="width:20px">

							</view>
							<u-button @click="cancel" type="primary" size="medium"><u-icon name="close"></u-icon>取消
							</u-button>

						</view>
					</u-form-item>
				</u-form>
			</view>
			<u-toast ref="uToast" />
			<u-mask class="loadingBox" :show="uLoading" @click="uLoading = false" :mask-click-able="false">
				<u-loading class="uLoading" mode="circle" :show="uLoading" size="100"></u-loading>
			</u-mask>
		</view>



		<!-- 异常建模 -->
		<u-popup style="z-index: 99;" v-model="showexception" mode="center" width="80%" height="70%" border-radius="10"
			@close="close" @closePop="showexception=false">
			<exceptionModel @close-popup="showexception=false"></exceptionModel>
		</u-popup>

	</view>
</template>

<script>
	import exceptionModel from './exceptionModel.vue'
	export default {
		components: {
			exceptionModel
		},
		props: {
			workorder: null
		},
		data() {
			return {
				uLoading: false,

				border: true,
				height: 50,
				autoHeight: true,
				show: false,
				border: true,
				form1: {},
				value: '',
				data_index: "product",
				formData: {

				},
				data_list: [],
				loading: false,
				// tab栏
				data_tabList: [{
					value: "产品选择",
					key: "product",
				}, ],
				statusList: [],
				gznTabs: [],
				gznWrap: [],
				showWrap: false,
				showTabs: false,
				// 报工历史数据
				proWorkorderFeedItemList: [],
				rules: {
					'resolution': {
						type: 'string',
						required: true,
						message: '请输入处理意见',
						trigger: ['blur', 'change']
					},
					'resolutionStatus': {
						type: 'string',

						required: true,
						message: '请选择状态',
						trigger: ['blur', 'change']
					},

				},

				exceptionLevel: [],
				exceptionType: [],
				exceptionStatus: [],
				showexception: false
			};
		},



		created() {
			this.$u.api.getDicts('exception_level').then(res => {
				this.exceptionLevel = res.data;

			})
			this.$u.api.getDicts('exception_type').then(res => {
				this.exceptionType = res.data;

			})
			this.$u.api.getDicts('exception_status').then(res => {
				this.exceptionStatus = res.data;

			})
			uni.$on('exceptionModelSelect', res => {
				console.log('选择异常模型', res)
				this.formData = res
				this.showexception = false
			})

		},

		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.formData.setRules(this.rules)
		},
		methods: {
			// 选择异常建模
			selectException() {
				console.log('selectException')
				this.showexception = true;
			},

			// 获取当前日期
			getCurrentDateTime() {
				const now = new Date();

				const year = now.getFullYear();
				const month = String(now.getMonth() + 1).padStart(2, "0"); // 月份从 0 开始，需要加 1
				const day = String(now.getDate()).padStart(2, "0");

				const hours = String(now.getHours()).padStart(2, "0");
				const minutes = String(now.getMinutes()).padStart(2, "0");
				const seconds = String(now.getSeconds()).padStart(2, "0");

				return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			},
			// 取消提交
			cancel() {
				this.formData = {};
				this.$emit("close-popup"); // 触发父组件的关闭事件
				
			},

			submit() {
				this.$refs.formData.validate(valid => {
					if (this.formData.itemCode) {
						this.uLoading = true

						this.$u.api.addStart(
							'Process_1755082318148',
							this.formData
						).then(res => {
							this.uLoading = false
							this.$refs.uToast.show({
								title: '操作成功',
								type: 'success',
							})
							setTimeout(() => {
								this.cancel()
								this.$refs.formData.resetFields()

							}, 1000)
						})
					} else {
						this.$refs.uToast.show({
							title: '请选择异常建模',
							type: 'warning',
						})
					}

				})


			},


			// 获取当前日期的方法
			getProjectNum() {
				const projectTime = new Date(); // 当前中国标准时间
				const Year = projectTime.getFullYear(); // 获取当前年份 支持IE和火狐浏览器.
				const Month = projectTime.getMonth() + 1; // 获取中国区月份
				const Day = projectTime.getDate(); // 获取几号
				const hour = projectTime.getHours();
				const minute = projectTime.getMinutes();
				const second = projectTime.getSeconds();
				var CurrentDate = String(Year);
				if (Month >= 10) {
					// 判断月份和几号是否大于10或者小于10
					CurrentDate = CurrentDate + "-" + Month + "-";
				} else {
					CurrentDate = CurrentDate + "-" + "0" + Month + "-";
				}
				if (Day >= 10) {
					CurrentDate += Day + " ";
				} else {
					CurrentDate += "0" + Day + " ";
				}
				if (hour >= 10) {
					CurrentDate += hour + ":";
				} else {
					CurrentDate += "0" + hour + ":";
				}
				if (minute >= 10) {
					CurrentDate += minute + ":";
				} else {
					CurrentDate += "0" + minute + ":";
				}
				if (second >= 10) {
					CurrentDate += second;
				} else {
					CurrentDate += "0" + second;
				}
				return CurrentDate;
			},
			close() {
				this.showexception = false;
			}



		},
	};
</script>
<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		padding: 20rpx;

		.content-title {
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 30rpx;
			font-weight: 600;
			margin: 10px;
		}

		.content-top {
			padding: 20rpx;
			height: 10%;
			width: 100%;
		}

		.content-bottom {
			display: flex;
			flex: 1;
			flex-direction: column;
			margin-top: 20rpx;
			padding: 30rpx;
		}

		.tab-content {
			width: 100%;
			position: relative;

			.tabs {
				display: flex;
				position: relative;
				color: rgb(70, 71, 72);
				border-bottom: 2rpx solid rgb(193, 193, 193);

				.tabs-item {
					margin-right: 80rpx;
					cursor: pointer;
					font-size: 32rpx;

					&.active {
						color: #2979ff;
						z-index: 9;

						&::after {
							content: "";
							bottom: -4rpx;
							left: 0;
							right: 0;
							height: 4rpx;
							background: #2979ff;
						}
					}
				}
			}

			.tab-list {
				// display: flex;
				// align-items: center;
				width: 100%;
				margin: 20rpx 0;
			}
		}



	}

	::v-deep .u-radio__icon-wrap--disabled--checked {
		background-color: rgb(41, 121, 255) !important;
		border-color: rgb(41, 121, 255);
	}
</style>